<template>
  <div class="step-box">
    <div v-if="toggleFlag">
      <el-row class="custom-id-title">
        客户身份证件照片
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" class="center">
          <div class="papers-photo">
            <el-image :src="frontUrl" :preview-src-list="frontUrlList" />
          </div>
        </el-col>
        <el-col :span="12" class="center">
          <div class="papers-photo">
            <el-image :src="reverseUrl" :preview-src-list="reverseUrlList" />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="site-identity-title">
        客户现场照片
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" class="center">
          <div class="peror-photo">
            <img :src="cusSceneUrl" alt="">
          </div>
        </el-col>
        <!--<el-col :span="12" class="center">-->
        <!--<div class="peror-photo">-->
        <!--<img :src=idCardUrl alt="">-->
        <!--</div>-->
        <!--</el-col>-->
        <el-col :span="24" class="center" style="padding-top: 15px">
          <el-button type="primary" @click="snapAction">抓拍</el-button>
        </el-col>
      </el-row>
      <el-row class="search-result">
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">联网核查结果：</el-col>
          <el-col :span="16">公民身份证号码与姓名一致，且存在照片</el-col>
        </el-row>
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">人脸识别结果：</el-col>
          <el-col :span="16"><span :class="scoreColor">{{ score }}</span>分 <span :class="scoreColor">{{ levelRisk }}</span></el-col>
        </el-row>
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">认证结果：</el-col>
          <el-col :span="16" :class="scoreColor">{{ onlineResult }}</el-col>
        </el-row>
      </el-row>
      <el-row class="bottom-submit">
        <el-button type="primary" @click="next2to2">确认</el-button>
      </el-row>
    </div>
    <div v-else-if="!toggleFlag">
      <el-row :gutter="20" class="page-box">
        <el-col :span="12" class="left-box">
          <el-row class="left-top view-box">
            <el-scrollbar style="height: 100%;width: 100%;">
              <el-row v-if="flag2to2">
                <el-row class="view-header">卡介质照片</el-row>
                <el-row class="center" style="padding: 10px 10px 0px;">
                  <div class="card-media-photo">
                    <el-image :src="mediaCardUrl" :preview-src-list="mediaCardUrlList" />
                  </div>
                </el-row>
                <el-row style="text-align: center;line-height: 32px;">
                  <span>卡号：</span>{{ bankCardNo }}
                </el-row>
                <el-row style="text-align: center;line-height: 32px;">
                  <span>账户实时状态：</span>{{ cardStatus }}
                </el-row>
              </el-row>
              <el-row v-else>
                <el-row class="view-header">
                  客户身份证件照片
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24" class="center" style="margin: 15px 0px 5px;">
                    <div class="papers-photo">
                      <el-image :src="frontUrl" :preview-src-list="frontUrlList" />
                    </div>
                  </el-col>
                  <el-col :span="24" class="center" style="margin: 5px 0px 0px;">
                    <div class="papers-photo">
                      <el-image :src="reverseUrl" :preview-src-list="reverseUrlList" />
                    </div>
                  </el-col>
                </el-row>
              </el-row>
              <el-row class="left-bottom">
                <el-row class="cus-info-box">
                  <el-row class="view-header">{{ cusInfoData.cusInfoTitle }}</el-row>
                  <el-row v-for="(item, index) in cusInfoData.cusModel" :key="index" class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">{{ item.cusInfoKey }}</el-col>
                    <el-col :span="17">{{ item.cusInfoValue }}</el-col>
                  </el-row>
                </el-row>
              </el-row>
            </el-scrollbar>
          </el-row>
        </el-col>
        <el-col :span="12" class="right-box">
          <el-row v-show="flag2to2" class="view-box">
            <!--<el-row class="view-header">OCR识别结果</el-row>-->
            <el-row class="view-header">客户身份证件照片</el-row>
            <el-row class="view-middle">
              <!--<el-scrollbar>-->
              <!--<el-row class="view-middle-header">-->
              <!--<el-row class="verify-item-list">-->
              <!--<el-col :span="6" :offset="4">姓名：</el-col>-->
              <!--<el-col :span="14">{{ocrCusInfoData.ocrName}}</el-col>-->
              <!--</el-row>-->
              <!--<el-row class="verify-item-list">-->
              <!--<el-col :span="6" :offset="4">性别：</el-col>-->
              <!--<el-col :span="14">{{ocrCusInfoData.ocrSex}}</el-col>-->
              <!--</el-row>-->
              <!--<el-row class="verify-item-list">-->
              <!--<el-col :span="6" :offset="4">民族：</el-col>-->
              <!--<el-col :span="14">{{ocrCusInfoData.ocrNation}}</el-col>-->
              <!--</el-row>-->
              <!--<el-row class="verify-item-list">-->
              <!--<el-col :span="6" :offset="4">出生年月：</el-col>-->
              <!--<el-col :span="14">{{ocrCusInfoData.ocrBirthDate}}</el-col>-->
              <!--</el-row>-->
              <!--<el-row class="verify-item-list">-->
              <!--<el-col :span="6" :offset="4">身份证号码：</el-col>-->
              <!--<el-col :span="14">{{ocrCusInfoData.ocrIdentify}}</el-col>-->
              <!--</el-row>-->
              <!--<el-row class="verify-item-list">-->
              <!--<el-col :span="6" :offset="4">证件有效期：</el-col>-->
              <!--<el-col :span="14">{{ocrCusInfoData.ocrCertTerm}}</el-col>-->
              <!--</el-row>-->
              <!--<el-row class="verify-item-list">-->
              <!--<el-col :span="6" :offset="4">联系地址：</el-col>-->
              <!--<el-col :span="14">{{ocrCusInfoData.ocrAddress}}</el-col>-->
              <!--</el-row>-->
              <!--</el-row>-->
              <!--</el-scrollbar>-->
              <el-scrollbar style="height: 100%;width: 100%;">
                <el-row :gutter="20">
                  <el-col :span="24" class="center" style="margin: 15px 0px 5px;">
                    <div class="papers-photo">
                      <el-image :src="frontUrl" :preview-src-list="frontUrlList" />
                    </div>
                  </el-col>
                  <el-col :span="24" class="center" style="margin: 5px 0px 15px;">
                    <div class="papers-photo">
                      <el-image :src="reverseUrl" :preview-src-list="reverseUrlList" />
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-row class="view-header">意愿核实</el-row>
                  <el-row class="verify-item line-height">1.您好，请问您是否为{{ ocrCusInfoData.ocrName }}本人？</el-row>
                  <el-row class="verify-item line-height">2.请问您是否自愿在本行办理银行卡激活业务？</el-row>
                  <el-row class="verify-item line-height">3.请确认您提供的开户申请资料是否真实、有效、完整、合法、准确？</el-row>
                  <el-row class="verify-item line-height rules">提示：若客户信息不存在，或者不够完整，可以点击更新客户信息按钮后在下一步进行修改</el-row>
                </el-row>
              </el-scrollbar>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" :disabled="tradePwdFlag" @click="next2to3flag1">设置交易密码</el-button>
              <el-button type="primary" @click="next2to3">更新客户信息</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag2to5" class="view-box">
            <el-row class="view-header">客户信息更新</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src="assets/theme/img/viceoBiz/customer.png" alt="">
                </div>
                <el-row class="photo-title">客户正在更改个人信息</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" @click="next3to3">客户设置成功</el-button>-->
              <!--<el-button type="primary" @click="next3to2">客户设置超限</el-button>-->
            </el-row>
          </el-row>
          <el-row v-show="flag2to3" class="view-box">
            <el-row class="view-header">客户信息更新</el-row>
            <el-row class="view-middle">
              <el-scrollbar style="margin:0px 0px !important;height: 100%">
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>姓名：</el-col>
                  <el-col :span="14">
                    <el-input v-model="cusName" size="small" :disabled="cusTelFlag" />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>性别：</el-col>
                  <el-col :span="14">
                    <el-input v-model="cusSex" size="small" :disabled="cusTelFlag" />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>民族：</el-col>
                  <el-col :span="14">
                    <el-input v-model="cusNation" size="small" :disabled="cusTelFlag" />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>出生年月：</el-col>
                  <el-col :span="14">
                    <el-input v-model="cusBirthDate" size="small" :disabled="cusTelFlag" />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>身份证号码：</el-col>
                  <el-col :span="14">
                    <el-input v-model="cusIdentify" size="small" :disabled="cusTelFlag" />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>证件有效期：</el-col>
                  <el-col :span="14">
                    <el-input v-model="cusCertTerm" size="small" :disabled="cusTelFlag" />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>联系地址：</el-col>
                  <el-col :span="14">
                    <el-input v-model="cusAddress" size="small" :disabled="cusTelFlag" />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>国籍：</el-col>
                  <el-col :span="14">
                    <el-select
                      v-model="cusCountry"
                      style="width: 100%;"
                      size="small"
                      clearable
                      :disabled="cusTelFlag"
                      placeholder="请选择"
                      @change="getCountryName"
                    >
                      <el-option
                        v-for="item in cusCountryOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>职业种类：</el-col>
                  <el-col :span="14">
                    <el-cascader
                      ref="professionForm"
                      v-model="professionValue"
                      :disabled="cusTelFlag"
                      size="small"
                      change-on-select
                      style="width: 100%"
                      :options="professionOption"
                      :props="{checkStrictly: false}"
                      @change="handleProfessFun"
                    />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>联系电话：</el-col>
                  <el-col :span="14">
                    <el-input v-model="cusTel" size="small" :disabled="cusTelFlag" />
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col v-show="cusTelFlag" :span="24" style="padding: 8px 0px;">
                    <span>{{ callinTime }}</span>
                  </el-col>
                  <el-col class="txt-left rules" :span="24" style="line-height: 24px">
                    注：带有*号的输入框为必填项，请输入内容，否则无法进行下一步
                  </el-col>
                </el-row>
                <el-row v-show="codeFailFlag" class="code-icon-fail">
                  <el-col :offset="6">
                    <i class="el-icon-circle-close" /><span class="code-padding">短信验证失败</span>
                  </el-col>
                </el-row>
                <el-row v-show="codeSuccessFlag" class="code-icon-success">
                  <el-col :offset="6"><i class="el-icon-success" /><span class="code-padding">短信验证成功</span>
                  </el-col>
                </el-row>
              </el-scrollbar>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" :disabled="cusTelFlag" @click="sendVerificationCode('cusCode')">更新客户信息</el-button>
              <el-button type="primary" :disabled="cusTelFlag" @click="sendVerificationCode('msgCode')">发送验证码</el-button>
              <!--<el-button type="primary" @click="sendToCusInfo">客户信息发送给客户验证</el-button>-->
              <!--<el-button type="primary" @click="sendCodeSuccess">短信验证成功</el-button>-->
              <!--<el-button type="primary" @click="sendCodeFail">短信验证失败</el-button>-->
            </el-row>
          </el-row>
          <el-row v-show="flag2to4" class="view-box">
            <el-row class="view-header">客户信息更新</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="pass-photo">
                  <img src="assets/theme/img/viceoBiz/success.png" alt="">
                </div>
                <el-row class="photo-title">短信验证成功</el-row>
                <el-row class="photo-title">客户信息更新提交成功</el-row>
              </el-row>
              <!--<el-row style="padding: 0px 30px;margin-top: 250px;">-->
              <!--<el-col class="txt-left rules" :span="24" style="line-height: 24px">-->
              <!--提示：请再次核对客户基本信息，如有错误请点击上一步进行修改-->
              <!--</el-col>-->
              <!--</el-row>-->
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" @click="prev2to4">上一步</el-button>-->
              <el-button type="primary" @click="next2to4">设置交易密码</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag3to1" class="view-box">
            <el-row class="view-header">设置交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src="assets/theme/img/viceoBiz/coding.png" alt="">
                </div>
                <el-row class="photo-title">客户正在设置交易密码</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" @click="next3to3">客户设置成功</el-button>-->
              <!--<el-button type="primary" @click="next3to2">客户设置超限</el-button>-->
            </el-row>
          </el-row>
          <el-row v-show="flag3to2" class="view-box">
            <el-row class="view-header">设置交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="exceed-photo">
                  <img src="assets/theme/img/viceoBiz/inputExceeded.png" alt="">
                </div>
                <el-row class="photo-title">客户交易密码设置超限</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom" />
          </el-row>
          <el-row v-show="flag3to3" class="view-box">
            <el-row class="view-header">设置交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src="assets/theme/img/viceoBiz/success.png" alt="">
                </div>
                <el-row class="photo-title">客户交易密码设置成功</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom" />
          </el-row>
          <el-row v-show="flag4to1" class="view-box">
            <el-row class="view-header">选择开通业务</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="open-biz-photo">
                  <img src="assets/theme/img/viceoBiz/openBizing.png" alt="">
                </div>
                <el-row class="photo-title">客户正在选择开通业务</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" @click="next4to2">客户端提交</el-button>-->
            </el-row>
          </el-row>
          <el-row v-show="flag4to2" class="view-box">
            <el-row class="view-header">选择开通业务</el-row>
            <el-row class="view-middle">
              <el-row class="open-biz-item">
                <el-checkbox v-model="openBizData.item1" disabled>ATM自助转账功能</el-checkbox>
              </el-row>
              <el-row class="open-biz-item">
                <el-col :span="6">单日转账限额（元）：</el-col>
                <el-col :span="18">{{ openBizData.item2 }}</el-col>
              </el-row>
              <el-row class="open-biz-item">
                <el-checkbox v-model="openBizData.item3" disabled>互联网在线支付功能</el-checkbox>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next4to1">重新选择业务</el-button>
              <el-button type="primary" @click="next4to3">确认</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag4to3" class="view-box">
            <el-row class="view-header">告知书</el-row>
            <el-row class="view-middle">
              <el-scrollbar style="height: 250px">
                <el-row class="view-middle-header" style="padding: 20px">
                  <el-row class="notification-title line-height" style="text-align: center;padding-bottom: 10px">
                    开设个人银行结算账户涉通讯网络新型违法犯罪法律责任及防范提示告知书
                  </el-row>
                  <el-row style="text-indent:30px;">
                    <p class="line-height">
                      为加强银行结算账户(以下称“账户”)管理，保证自然人合法、规范开立和使用个人账户，避免被违法犯罪人员用于转移通讯网络新型违法犯罪赃款，根据最高人民法院、最高人民检察院、公安部 《关于办理电信网络诈骗等刑事案件适用法律若干问题的意见》（法发【2016】32号）、《人民币银行结算账户管理办法》（中国人民银行令【2003】第5号）和中国人民银行《关于加强支付结算管理防范电信网络新型违法犯罪有关事项的通知》（银发【2016】261号）等文件之规定，现将相关涉通讯网络新型违法犯罪法律责任及防范提示告知如下:</p>
                    <p class="line-height">一、自然人申请开立个人账户时，应按照现行账户管理制度规定提供真实有效身份证件，并如实填写个人相关信息。违者将按相关账户管理制度规定进行处罚；构成犯罪的，移交司法机关依法追究刑事责任。</p>
                    <p class="line-height">
                      二、自然人申请开立个人账户时，严禁假冒他人身份或者虚构代理关系开立银行帐户，自然人应妥善保管自身名下所有账户，充分了解账户管理和信用风险，严禁出租、出借、出售、购买银行账户。违者将按相关账户管理制度规定，5年内暂停其个人账户非柜面业务，3年内不得为其新开立账户，同时其个人信息将被移送金融信用信息基础数据库并向社会公布。</p>
                    <p class="line-height">三、对明知他人实施电信网络诈骗犯罪，提供信用卡、资金支付结算账户的个人，根据相关法律制度规定，以共同犯罪论处。</p>
                    <p class="line-height">四、自然人申请开立个人账户时务必提高防范通讯网络新型违法犯罪意识，如遇到以下情形，应立即停止开户，并向银行工作人员提出帮助请求：</p>
                    <p class="line-height">（一）自称“公安、检察、法院、海关”等各类执法人员，要求你将资金转移至“安全账户”的；</p>
                    <p class="line-height">（二）自称你的“家人、朋友、熟人、领导、老师、医生、恋人”等各类关系人，要求你进行存钱、汇款或转账的；</p>
                    <p class="line-height">（三）自称可以为你办理“退货、退税、退票、发放补贴、领奖、积分兑换、提高信用卡额度、刷信誉返利、低息高额贷款”等各类“获利”行为，要求你进行存钱、汇款或转账的；</p>
                    <p class="line-height">（四）使用“举报信、PS照片、黑社会报复”等各类威胁手段，要求你进行存钱、汇款或转账的。</p>
                    <p class="line-height">（五）其他可疑情形。</p>
                    <p class="line-height">五、如有任何涉通讯网络新型违法犯罪疑问，请咨询江苏省反通讯网络诈骗中心的24小时专线025-83526546。</p>
                    <p class="line-height">开户申请人已清楚明确阅读上述各项开立、使用银行结算账户涉电信网络新型违法犯罪法律责任及防范提示告知内容，将依法开立、使用并妥善保管个人银行结算账户。</p>
                    <p class="line-height">开户申请人：</p>
                    <p class="line-height" style="float: right">年  月  日</p>
                  </el-row>
                </el-row>
              </el-scrollbar>
              <el-row class="view-middle-bottom">
                <el-row class="view-header">意愿核实</el-row>
                <el-scrollbar style="height: 290px">
                  <el-row class="verify-item line-height">1.请问您是否已认真阅读《开设个人结算账户涉通讯网络新型违法犯罪法律责任及防范提示告知书》及相关责任条款？</el-row>
                  <el-row class="verify-item line-height">2.请问您是否已完全理解并接受相关定义、须知、章程、功能说明及责任条款等全部内容并自愿受其法律约束？</el-row>
                  <el-row class="verify-item line-height">
                    3.银行账户严禁出租、出借、出售、购买，违者将按相关账户管理制度规定，5年内暂停个人账户非柜面业务、支付账户所有业务，不得新开立账户，同时您的个人信息将被移送金融信用信息基础数据库并向社会公布。请问您是否知晓？
                  </el-row>
                </el-scrollbar>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" :disabled="bizConfirmFlag" @click="next5to1">确认</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag5to1" class="view-box">
            <el-row class="view-header">提交申请</el-row>
            <el-row class="view-middle">
              <el-row style="padding: 20px 0 20px 0; text-align:center; font-weight: bold;">业务确认单</el-row>
              <el-row style="padding: 0 40px 0 40px">
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">交易类型：</el-col>
                  <el-col :span="12">{{ bizCertData.businessType }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">交易时间：</el-col>
                  <el-col :span="12">{{ transTime }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">卡号：</el-col>
                  <el-col :span="12">{{ bankCardNo }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">户名：</el-col>
                  <el-col :span="12">{{ cusName }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">身份证号码：</el-col>
                  <el-col :span="12">{{ cusIdentify }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">联系电话：</el-col>
                  <el-col :span="12">{{ cusTel }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">ATM自助转账功能：</el-col>
                  <el-col :span="12">{{ openBizData.item1 ? '开通' : '未开通' }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">单日转账限额（元）：</el-col>
                  <el-col :span="12">{{ openBizData.item2 }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">互联网在线支付功能：</el-col>
                  <el-col :span="12">{{ openBizData.item3 ? '开通' : '未开通' }}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="1" :offset="4">
                    <el-checkbox :checked="true" />
                  </el-col>
                  <el-col :span="17">本人已仔细核对激活的账户信息及联系电话，
                    同时已设置账户密码，确认上述内容与本人申请办理业务的内容一致
                  </el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="24" :offset="4">客户签名：</el-col>
                  <el-col :span="16" :offset="4" class="sign-style">
                    <img :src="cusSignUrl" alt="">
                  </el-col>
                </el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button v-show="reSignFlag" type="primary" @click="reSignAction">重新签名</el-button>
              <el-button v-show="bizFormFlag" type="primary" :disabled="bizFromConfirmFlag" @click="bizFromConfirmAction">确认</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag5to2" class="view-box">
            <el-row class="view-header">提交申请</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src="assets/theme/img/viceoBiz/cardFail.png" alt="">
                </div>
                <el-row class="photo-title">卡激活失败</el-row>
                <el-row class="photo-title">失败原因：{{ failReason }}</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom" />
          </el-row>
          <el-row v-show="flag5to3" class="view-box">
            <el-row class="view-header">提交申请</el-row>
            <el-row class="view-middle">
              <el-row class="view-middle-header">
                <el-row style="padding-top: 70px;">
                  <div class="success-photo">
                    <img src="assets/theme/img/viceoBiz/success.png" alt="">
                  </div>
                  <el-row class="photo-title">卡激活成功</el-row>
                </el-row>
              </el-row>
              <el-row class="view-middle-bottom">
                <el-row class="view-header">业务提示</el-row>
                <el-row class="verify-item line-height">
                  您此次激活的{{ cardName }}不支持办理银联等业务，如ATM存取款、POS机刷卡、绑定苏E行，如需开通此类业务，请您本人携带身份证和卡介质至银行柜面或者超柜办理“社保卡/借记卡有效期获取”。
                </el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" disabled>办理其他业务</el-button>-->
              <el-button type="primary" @click="next6to1">生成凭证表单</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag6to1" class="view-box">
            <el-row class="view-header">凭证签名</el-row>
            <el-row class="view-middle">
              <!--<BizCertForm :data="bizCertData"></BizCertForm>-->
              <el-scrollbar style="height: 100%">
                <div id="bizCertCanvas" class="confirmTable">
                  <el-row class="confirmTitle">苏州农商行远程银行电子凭证</el-row>
                  <el-row class="confirmTableBody">
                    <el-row class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="6">电子凭证流水号：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.coreSeqNo }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="24">客戶信息</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">姓名：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.name }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">民族：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.nation }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">证件类型：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.certType }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">证件号码：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.idNum }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">联系电话：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.tel }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="10">联系地址/常用地址：</el-col>
                      <el-col class="padding-style txt-right" :span="14">{{ bizCertData.address }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">大类职业：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.profession }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">中类职业：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.childProFession }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">国籍：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{ bizCertData.country }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="24">证件信息</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="24">正面照</el-col>
                      <el-col class="padding-style txt-right" style="height: 150px" :span="24">
                        <img :src="frontBase64" style="height:100%;float:left;">
                      </el-col>
                    </el-row>
                    <el-row class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="24">反面照</el-col>
                      <el-col class="padding-style txt-right" style="height: 150px" :span="24">
                        <img :src="reverseBase64" style="height:100%;float:left;">
                      </el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="24">核查结果</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="10">联网核查结果：</el-col>
                      <el-col class="padding-style txt-right" :span="14">公民身份证号码与姓名一致，且存在照片</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="10">人脸识别分数：</el-col>
                      <el-col class="padding-style txt-right" :span="14">{{ bizCertData.faceScore }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="10">活体检测结果：</el-col>
                      <el-col class="padding-style txt-right" :span="14">{{ bizCertData.liveResult }}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="10">业务办理信息</el-col>
                      <el-col class="padding-style txt-right" :span="14" />
                    </el-row>
                    <el-row v-show="bizCertData.informationMaintenance" class="border-bottom-style">
                      <el-col class="padding-style" :span="10">信息维护</el-col>
                      <el-col class="padding-style txt-right" :span="14" />
                    </el-row>
                    <el-row class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="14">{{ bizCertData.businessType }}</el-col>
                      <el-col class="padding-style txt-right" :span="10" />
                    </el-row>
                    <el-row v-show="openBizData.item1" class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="24">ATM自助转账签约</el-col>
                    </el-row>
                    <el-row v-show="openBizData.item3" class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="24">互联网支付签约</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="24">客户签名</el-col>
                      <el-col class="padding-style txt-right" style="height: 180px" :span="24">
                        <img :src="cusSignBase64" style="height:100%;float:left;">
                      </el-col>
                    </el-row>
                  </el-row>
                  <el-row class="confirmTableBFooter">
                    <el-row>
                      <el-col :span="5" class="footer-style">经办人：</el-col>
                      <el-col :span="6" class="footer-style">{{ bizCertData.manager }}</el-col>
                      <el-col :span="5" class="footer-style">经办人工号：</el-col>
                      <el-col :span="8" class="footer-style">{{ bizCertData.managerNum }}</el-col>
                    </el-row>
                  </el-row>
                </div>
              </el-scrollbar>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" v-show="sendSignFlag" @click="sendBizCertToClient">发送给客户</el-button>-->
              <!--<el-button type="primary" v-show="submitResultFlag" @click="next6to2">提交</el-button>-->
              <el-button type="primary" @click="next6to3">生成电子凭证</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag6to2" class="view-box">
            <el-row class="view-header">凭证签名</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src="assets/theme/img/viceoBiz/success.png" alt="">
                </div>
                <el-row class="photo-title">电子凭证生成成功，请结束交易</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom" />
          </el-row>
          <el-row v-show="flag6to3" class="view-box">
            <el-row class="view-header">提交凭证</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src="assets/theme/img/viceoBiz/cardFail.png" alt="">
                </div>
                <el-row class="photo-title">电子凭证提交失败</el-row>
                <el-row class="photo-title">失败原因：{{ certFailReason }}</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom" />
          </el-row>
          <el-row v-show="flagEnd" class="view-box">
            <el-row class="view-header">交易结束</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="exceed-photo">
                  <img src="assets/theme/img/viceoBiz/ending.png" alt="">
                </div>
                <el-row class="photo-title">交易结束</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom" />
          </el-row>
        </el-col>
      </el-row>
      <el-row v-show="endTransFlag" class="page-bottom" style="text-align: left">
        <el-button type="primary" @click="nextEnd">结束交易</el-button>
      </el-row>
    </div>
    <el-dialog
      title="凭证预览"
      :visible.sync="dialogVisible"
    >
      <el-scrollbar style="height: 600px">
        <img :src="bizCertUrl" alt="">
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadFileFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Axios from 'axios'
import html2canvas from 'html2canvas'
import BizCertForm from '@/views/videoBiz/xiaochengxu/forOpenHouse/bizCertForm'
import {
  queryCusSenceScore,
  queryCusInfo,
  imgTransBase64,
  uploadFile,
  sendCodeMessage,
  ocrBankCard,
  submitBizForm,
  socialCardActive,
  onlinePayOpen,
  submitBizCert,
  saveTransPipeline
} from '@/api/videoBiz/videoBiz'

export default {
  name: 'CardVideo',
  components: {
    BizCertForm
  },
  data() {
    return {
      frontUrl: 'assets/theme/img/viceoBiz/frontPhoto.png',
      reverseUrl: 'assets/theme/img/viceoBiz/reversePhoto.png',
      cusSceneUrl: 'assets/theme/img/viceoBiz/perpr.png',
      cusSceneName: '',
      mediaCardUrl: 'assets/theme/img/viceoBiz/cardMedia.png',
      frontUrlList: [],
      reverseUrlList: [],
      mediaCardUrlList: [],
      cusSignUrl: '',
      frontName: '',
      reverseName: '',
      mediaCardName: '',
      frontBase64: '',
      reverseBase64: '',
      mediaCardBase64: '',
      cusSignBase64: '',
      bankCardNo: '',
      cardType: '2',
      cardName: '借记卡',
      khflag: '0',
      /** ************** 联网核查结果 ******************/
      // 分数
      score: 0,
      levelRisk: '高风险',
      scoreColor: 'redColor',
      // 核查结果
      onlineResult: '由坐席确认是否通过',
      // 卡激活状态
      cardStatus: '借记卡未激活',
      toggleFlag: true,
      isUpdateFlag: false,
      tradePwdFlag: false,
      flag2to2: true,
      flag2to3: false,
      flag2to4: false,
      flag2to5: false,
      flag3to1: false,
      flag3to2: false,
      flag3to3: false,
      flag4to1: false,
      flag4to2: false,
      flag4to3: false,
      flag5to1: false,
      flag5to2: false,
      flag5to3: false,
      flag6to1: false,
      flag6to2: false,
      flag6to3: false,
      flagEnd: false,
      endTransFlag: true,
      reSignFlag: false,
      bizFormFlag: false,
      sendSignFlag: true,
      submitResultFlag: true,
      cusAddressFlag: false,
      cusTelFlag: false,
      callinTime: '60s后可发送',
      timer: '',
      codeFailFlag: false,
      // 短信验证码是否成功
      codeSuccessFlag: false,
      // 开通业务选项
      openBizData: {
        item1: false,
        item2: 0,
        item3: false
      },
      // 卡激活失败原因
      failReason: '',
      cardActiveFlag: false,
      // 交易时间
      transTime: '',
      // 业务确认单按钮
      bizConfirmFlag: true,
      bizFromConfirmFlag: false,
      dialogVisible: false,
      bizCertUrl: '',
      bizCertName: '',
      bizCertSeqNo: '',
      certFailReason: '',
      // 业务凭证表单
      bizCertData: {
        // 流水号
        'coreSeqNo': '',
        // 姓名
        'name': '',
        // 证件类型
        'certType': '身份证',
        // 证件号码
        'idNum': '',
        // 民族
        'nation': '',
        // 联系电话
        'tel': '',
        // 大类职业
        'profession': '',
        // 中类职业
        'childProFession': '',
        // 国籍
        'country': '',
        // 联系地址
        'address': '',
        // 正面照
        'frontPhoto': this.frontBase64,
        // 反面照
        'backPhoto': this.reverseBase64,
        // 联网核查结果
        'onlineResult': this.onlineResult,
        // 人脸识别分数
        'faceScore': this.score,
        // 活体检测结果
        'liveResult': '',
        // 信息维护
        'informationMaintenance': this.isUpdateFlag,
        // 业务类型
        'businessType': sessionStorage.getItem('businessType'),
        // 客户签名
        'signUrl': '',
        // 经办人
        'manager': '',
        // 经办人工号
        'managerNum': ''
      },
      cusInfoData: {
        'cusInfoTitle': '客户基本信息',
        'cusModel': [
          {
            'cusInfoKey': '姓名：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '性别：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '民族：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '出生年月：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '身份证号码：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '证件有效期：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '联系方式：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '联系地址：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '大类职业：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '中类职业：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '国籍：',
            'cusInfoValue': ''
          }
        ]
      },
      ocrCusInfoData: {
        ocrName: '',
        ocrSex: '',
        ocrNation: '',
        ocrBirthDate: '',
        ocrIdentify: '',
        ocrCertTerm: '',
        ocrAddress: ''
      },
      cusCountryOptions: window.DICJSON.COUNTRY,
      professionOption: window.DICJSON.PROFESSION,
      professionValue: [],
      professionName: [],
      cusName: '',
      cusSex: '',
      cusNation: '',
      cusBirthDate: '',
      cusIdentify: '',
      cusCertTerm: '',
      cusTel: '',
      cusAddress: '',
      cusCountry: 'CHN',
      cusCountryName: '中国'
    }
  },
  watch: {

  },
  created() {

  },
  mounted() {
    /** ******************************** 小程序交互信令 ****************************************/
    const self = this
    // 收到结束会话
    window.eventEmitter.$on('EventVideoChatDone', () => {
      if (sessionStorage.getItem('videoCallType') == '小程序卡激活') {
        self.nextEnd()
      }
    })
    // 视频进线
    window.eventEmitter.$on('EventVideoRing', (data) => {
      // 初始化按钮
      self.toggleFlag = true
      self.endTransFlag = true
      self.flagEnd = false
      self.flag2to2 = true
      self.resetGlobalVarible()
      self.nextStep(1)
      if (data.frontIDCard) {
        self.frontName = data.frontIDCard
        self.frontUrl = window.CONFIG.fileServer + '/get?filename=' + data.frontIDCard
        self.frontUrlList.push(self.frontUrl)
      }
      if (data.reverseIDCard) {
        self.reverseName = data.reverseIDCard
        self.reverseUrl = window.CONFIG.fileServer + '/get?filename=' + data.reverseIDCard
        self.reverseUrlList.push(self.reverseUrl)
      }
      if (data.mediaCard) {
        self.mediaCardName = data.mediaCard
        self.mediaCardUrl = window.CONFIG.fileServer + '/get?filename=' + data.mediaCard
        self.mediaCardUrlList.push(self.mediaCardUrl)
      }
      // 获取客户端ocr识别的客户信息
      if (data.customerInfo) {
        self.ocrCusInfoData.ocrName = data.customerInfo.name
        self.ocrCusInfoData.ocrSex = data.customerInfo.sex
        self.ocrCusInfoData.ocrNation = data.customerInfo.nation
        self.ocrCusInfoData.ocrBirthDate = data.customerInfo.birth
        self.ocrCusInfoData.ocrIdentify = data.customerInfo.idCardNo
        self.ocrCusInfoData.ocrCertTerm = data.customerInfo.validDate
        self.ocrCusInfoData.ocrAddress = data.customerInfo.address
      }
      this.bankCardNo = data.bankCardNo
      this.khflag = data.cardStatus // 开户标志
      this.cardType = data.cardType // 卡类型（借记卡、社保卡）
      sessionStorage.setItem('idCardNo', data.idCardNo) // 身份证号
      sessionStorage.setItem('bankCardNo', data.bankCardNo) // 卡号
      sessionStorage.setItem('customerNo', data.customerNo) // 客户号
      sessionStorage.setItem('customerName', data.customerName) // 客户姓名
      sessionStorage.setItem('businessType', data.businessType) // 业务类型
      sessionStorage.setItem('openingBank', data.openingBank) // 开户行
      sessionStorage.setItem('videoCallType', '小程序卡激活') // 卡激活标识
      // 社保卡
      if (data.cardType == '1') {
        self.cardName = '社保卡'
        if (data.cardStatus == '0') {
          self.cardStatus = '未开户未激活'
        } else if (data.cardStatus == '1') {
          self.cardStatus = '已开户未激活'
        } else if (data.cardStatus == '2') {
          self.cardStatus = '已开户已激活'
        }
      }
      // 借记卡
      else {
        self.cardName = '借记卡'
        if (data.cardStatus == '0') {
          self.cardStatus = '可收可付'
        } else if (data.cardStatus == '1') {
          self.cardStatus = '只收不付'
        } else if (data.cardStatus == '2') {
          self.cardStatus = '只付不收'
        } else if (data.cardStatus == '3') {
          self.cardStatus = '不收不付'
        } else if (data.cardStatus == 'a') {
          self.cardStatus = '借记卡未激活'
        } else if (data.cardStatus == 'b') {
          self.cardStatus = '借记卡已激活'
        } else if (data.cardStatus == 'c') {
          self.cardStatus = '只收不付，涉案客户其他账户'
        } else if (data.cardStatus == 'd') {
          self.cardStatus = '只收不付，开户6个月无交易'
        }
      }
    })
    // 收到拍照成功
    window.eventEmitter.$on('EventSnapSuccess', (data) => {
      self.cusSceneUrl = data.snapUrl
      const cusSceneBlob = Utils.dataURLtoBlob(this.cusSceneUrl)
      const formData = new FormData()
      formData['enctype'] = 'multipart/form-data'
      formData.append('file', cusSceneBlob)
      uploadFile(formData).then(response => {
        this.cusSceneName = response.data
      }).catch(error => {
        console.log(error)
      })
      self.queryCusSenceScoreFun(data.snapUrl)
    })
    // 收到短信验证码成功
    window.eventEmitter.$on('EventSmsCodeSuccess', () => {
      self.codeSuccessFlag = false
      self.codeFailFlag = false
      self.flag2to3 = false
      self.flag2to4 = true
      // 清除定时器
      window.clearInterval(self.timer)
    })
    // 收到短信验证码失败
    window.eventEmitter.$on('EventSmsCodeFail', () => {
      self.codeSuccessFlag = false
      self.codeFailFlag = true
    })
    // 收到客户确认的客户信息
    window.eventEmitter.$on('EventCusInfoConfirm', (data) => {
      self.cusName = data.customerName
      self.cusSex = data.sex
      self.cusNation = data.nation
      self.cusBirthDate = data.birth
      self.cusIdentify = data.idCardNo
      self.cusCertTerm = data.validDate
      self.cusAddress = data.address
      self.cusTel = data.tel
      self.professionValue = [data.profession, data.childProFession]
      self.cusCountry = data.country
      self.professionName = [data.professionName, data.childProFessionName]
      self.cusCountryName = data.countryName
      self.cusInfoData.cusModel[0].cusInfoValue = self.cusName
      self.cusInfoData.cusModel[1].cusInfoValue = self.cusSex
      self.cusInfoData.cusModel[2].cusInfoValue = self.cusNation
      self.cusInfoData.cusModel[3].cusInfoValue = self.cusBirthDate
      self.cusInfoData.cusModel[4].cusInfoValue = self.cusIdentify
      self.cusInfoData.cusModel[5].cusInfoValue = self.cusCertTerm
      self.cusInfoData.cusModel[6].cusInfoValue = self.cusTel
      self.cusInfoData.cusModel[7].cusInfoValue = self.cusAddress
      self.cusInfoData.cusModel[8].cusInfoValue = self.professionName[0]
      self.cusInfoData.cusModel[9].cusInfoValue = self.professionName[1]
      self.cusInfoData.cusModel[10].cusInfoValue = self.cusCountryName
      sessionStorage.setItem('customerName', self.cusName)
      sessionStorage.setItem('nationality', self.cusNation)
      sessionStorage.setItem('idCardNo', self.cusIdentify)
      sessionStorage.setItem('contactTel', self.cusTel)
      sessionStorage.setItem('contactAdr', self.cusAddress)
      self.flag2to3 = true
      self.flag2to5 = false
      self.cusTelFlag = false
      // self.flag2to3 = false
      // self.flag2to4 = true
    })
    // 收到客户取消的客户信息
    window.eventEmitter.$on('EventCusInfoCancel', () => {
      window.globalUiKit.notify('提示', '客户信息更新验证失败，请重新验证！', 'info')
      self.codeSuccessFlag = false
      self.codeFailFlag = false
      self.cusTelFlag = false
      window.clearInterval(self.timer)
    })
    // 收到客户设置交易密码超限或失败
    window.eventEmitter.$on('EventSetPassFail', () => {
      self.next3to2()
    })
    // 收到客户设置交易密码成功
    window.eventEmitter.$on('EventSetPassSuccess', (data) => {
      sessionStorage.setItem('password', data.password)
      self.next3to3()
    })
    // 收到客户端提交的开通业务内容
    window.eventEmitter.$on('EventOpenBizSubmit', (data) => {
      self.next4to2()
      // ATM自助转账功能
      self.openBizData.item1 = data.item1
      // 单日转账限额（元）
      self.openBizData.item2 = data.item2
      // 互联网在线支付功能
      self.openBizData.item3 = data.item3
    })
    // 收到客户端确认阅读告知书
    window.eventEmitter.$on('EventNotificationRead', () => {
      self.bizConfirmFlag = false
    })
    // 客户提交签名
    window.eventEmitter.$on('EventCusSignSubmit', (data) => {
      // 客户签名照片
      self.cusSignUrl = window.CONFIG.fileServer + '/get?filename=' + data.signPhoto
      self.transTime = data.transTime
      self.signSubmitAction()
      imgTransBase64(data.signPhoto).then(response => {
        this.cusSignBase64 = response.data
      }).catch(error => {
        console.log(error)
      })
    })
    // 收到客户端确认业务凭证
    window.eventEmitter.$on('EventBizCertConfrim', () => {
      self.sendSignFlag = false
      self.submitResultFlag = true
    })
  },
  methods: {
    // 抓拍客户现场照
    snapAction() {
      globalUserData.sendSnap()
    },
    // 步骤条步进
    nextStep(index) {
      this.$emit('nextStep', index)
    },
    // 步骤2-2
    next2to2() {
      if (parseFloat(this.score) >= 0.9) {
        this.next2to2Fun()
      } else {
        this.$confirm('此客户为高风险客户，请确认是否通过？', '系统提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          this.next2to2Fun()
        }).catch(() => {

        })
      }
    },
    next2to2Fun() {
      this.toggleFlag = false
      // 客户基本信息
      this.queryCusInfoFun(sessionStorage.getItem('customerNo'))
      // 客户照片转Base64
      this.imgTransBase64Fun()
    },
    // 步骤2-3
    next2to3() {
      // 客户信息是否需要更新
      const cusObj = {
        'customerName': this.cusName,
        'sex': this.cusSex,
        'nation': this.cusNation,
        'birth': this.cusBirthDate,
        'idCardNo': this.cusIdentify,
        'validDate': this.cusCertTerm,
        'address': this.cusAddress,
        'tel': this.cusTel,
        'profession': this.professionValue[0],
        'childProFession': this.professionValue[1],
        'country': this.cusCountry,
        'professionName': this.professionName[0],
        'childProFessionName': this.professionName[1],
        'countryName': this.cusCountryName
      }
      this.flag2to2 = false
      this.flag2to5 = true
      this.isUpdateFlag = true
      globalUserData.sendWillingVerifySuccess(cusObj)
    },
    // 设置交易密码
    next2to3flag1() {
      this.flag2to2 = false
      this.flag3to1 = true
      this.nextStep(2)
      // 设置交易密码
      globalUserData.sendSetPass()
    },
    // 发送验证码
    sendVerificationCode(code) {
      this.codeSuccessFlag = false
      this.codeFailFlag = false
      if (!this.cusName) {
        window.globalUiKit.notify('提示', '姓名不能为空！', 'info')
        return false
      } else if (!this.cusSex) {
        window.globalUiKit.notify('提示', '性别不能为空！', 'info')
        return false
      } else if (!this.cusNation) {
        window.globalUiKit.notify('提示', '民族不能为空！', 'info')
        return false
      } else if (!this.cusBirthDate) {
        window.globalUiKit.notify('提示', '出生年月不能为空！', 'info')
        return false
      } else if (!this.cusIdentify) {
        window.globalUiKit.notify('提示', '身份证号码不能为空！', 'info')
        return false
      } else if (!this.cusCertTerm) {
        window.globalUiKit.notify('提示', '证件有效期不能为空！', 'info')
        return false
      } else if (!this.cusAddress) {
        window.globalUiKit.notify('提示', '联系地址不能为空！', 'info')
        return false
      } else if (!this.cusCountry) {
        window.globalUiKit.notify('提示', '国籍不能为空！', 'info')
        return false
      } else if (this.professionValue.length == 0) {
        window.globalUiKit.notify('提示', '职业种类不能为空！', 'info')
        return false
      } else if (!this.cusTel) {
        window.globalUiKit.notify('提示', '联系电话不能为空！', 'info')
        return false
      }
      // 更新客户信息
      if (code == 'cusCode') {
        this.cusTelFlag = true
        const cusObj = {
          'customerName': this.cusName,
          'sex': this.cusSex,
          'nation': this.cusNation,
          'birth': this.cusBirthDate,
          'idCardNo': this.cusIdentify,
          'validDate': this.cusCertTerm,
          'address': this.cusAddress,
          'tel': this.cusTel,
          'profession': this.professionValue[0],
          'childProFession': this.professionValue[1],
          'country': this.cusCountry,
          'professionName': this.professionName[0],
          'childProFessionName': this.professionName[1],
          'countryName': this.cusCountryName
        }
        globalUserData.sendUpdateCusInfo(cusObj)
      }
      // 发送短信验密码
      else {
        const code = Math.random().toFixed(6).slice(-6)
        globalUserData.sendSmsCode(this.cusTel, code)
        this.sendCodeMessageFun(this.cusTel, code)
        this.start()
      }
    },
    // 更新后的客户信息发送给客户
    sendToCusInfo() {
      const cusObj = {
        'customerName': this.cusName,
        'sex': this.cusSex,
        'nation': this.cusNation,
        'birth': this.cusBirthDate,
        'idCardNo': this.cusIdentify,
        'validDate': this.cusCertTerm,
        'address': this.cusAddress,
        'tel': this.cusTel,
        'profession': this.professionValue[0],
        'childProFession': this.professionValue[1],
        'country': this.cusCountry,
        'professionName': this.professionName[0],
        'childProFessionName': this.professionName[1],
        'countryName': this.cusCountryName
      }
      if (!this.cusName) {
        window.globalUiKit.notify('提示', '姓名不能为空！', 'info')
        return false
      } else if (!this.cusSex) {
        window.globalUiKit.notify('提示', '性别不能为空！', 'info')
        return false
      } else if (!this.cusNation) {
        window.globalUiKit.notify('提示', '民族不能为空！', 'info')
        return false
      } else if (!this.cusBirthDate) {
        window.globalUiKit.notify('提示', '出生年月不能为空！', 'info')
        return false
      } else if (!this.cusIdentify) {
        window.globalUiKit.notify('提示', '身份证号码不能为空！', 'info')
        return false
      } else if (!this.cusCertTerm) {
        window.globalUiKit.notify('提示', '证件有效期不能为空！', 'info')
        return false
      } else if (!this.cusAddress) {
        window.globalUiKit.notify('提示', '联系地址不能为空！', 'info')
        return false
      } else if (!this.cusCountry) {
        window.globalUiKit.notify('提示', '国籍不能为空！', 'info')
        return false
      } else if (this.professionValue.length == 0) {
        window.globalUiKit.notify('提示', '职业种类不能为空！', 'info')
        return false
      } else if (!this.cusTel) {
        window.globalUiKit.notify('提示', '联系电话不能为空！', 'info')
        return false
      }
      globalUserData.sendUpdateCusInfo(cusObj)
    },
    // 短信验证码成功
    sendCodeSuccess() {
      this.codeSuccessFlag = true
      this.codeFailFlag = false
    },
    // 短信验证码失败
    sendCodeFail() {
      this.codeFailFlag = true
      this.codeSuccessFlag = false
    },
    // 上一步
    prev2to4() {
      this.flag2to3 = true
      this.flag2to4 = false
      this.codeSuccessFlag = false
      this.codeFailFlag = false
      this.cusTelFlag = false
      window.clearInterval(this.timer)
    },
    // 步骤2-4, 跳转客户设置交易密码页面
    next2to4() {
      this.flag2to4 = false
      this.flag3to1 = true
      this.nextStep(2)
      // 设置交易密码
      globalUserData.sendSetPass()
    },
    // 步骤3-2, 客户输入限额
    next3to2() {
      this.flag3to1 = false
      this.flag3to2 = true
    },
    // 步骤3-3， 设置交易密码成功
    next3to3() {
      this.flag3to1 = false
      this.flag3to3 = true
      // 3秒后跳转开通业务页面
      setTimeout(() => {
        this.flag3to3 = false
        this.flag4to1 = true
        this.nextStep(3)
      }, 3000)
    },

    // 步骤4-1， 客户正在开通业务
    next4to1() {
      this.flag4to2 = false
      this.flag4to1 = true
      globalUserData.sendReOpenBiz()
    },
    // 步骤4-2， 座席确认选择开通的业务
    next4to2() {
      this.flag4to1 = false
      this.flag4to2 = true
    },
    // 步骤4-3， 告知书
    next4to3() {
      this.flag4to2 = false
      this.flag4to3 = true
      globalUserData.sendOpenBizConfirm()
    },
    // 步骤5-1， 业务确认单
    next5to1() {
      this.flag4to3 = false
      this.flag5to1 = true
      this.nextStep(4)
      globalUserData.sendBizConfirmForm()
    },
    // 客户签名提交
    signSubmitAction() {
      this.reSignFlag = true
      this.bizFormFlag = true
    },
    // 重新签名
    reSignAction() {
      this.reSignFlag = false
      this.bizFormFlag = false
      this.cusSignUrl = ''
      globalUserData.sendReSign()
    },
    // 业务确认单提交(卡激活)
    bizFromConfirmAction() {
      this.bizFromConfirmFlag = true
      // 社保卡激活
      if (this.cardType == '1') {
        this.socialCardActiveFun()
      }
      // 借记卡激活
      else {
        this.submitBizFormFun()
      }
    },
    // 步骤5-2， 客户提交申请失败
    cardActiveFail() {
      this.flag5to1 = false
      this.flag5to2 = true
      this.bizFromConfirmFlag = false
    },
    // 步骤5-3， 卡激活成功
    cardActiveSuccess() {
      this.flag5to1 = false
      this.flag5to3 = true
      this.bizFromConfirmFlag = false
    },
    // 步骤6-1，凭证签名
    next6to1() {
      this.flag5to3 = false
      this.flag6to1 = true
      this.nextStep(5)
      // 流水号
      this.bizCertData.coreSeqNo = sessionStorage.getItem('coreSeqNo')
      // 姓名
      this.bizCertData.name = sessionStorage.getItem('customerName')
      // 证件类型
      this.bizCertData.certType = '身份证'
      // 民族
      this.bizCertData.nation = this.cusNation
      // 证件号码
      this.bizCertData.idNum = sessionStorage.getItem('idCardNo')
      // 联系电话
      this.bizCertData.tel = this.cusTel
      // 联系地址
      this.bizCertData.address = this.cusAddress
      // 大类职业
      this.bizCertData.profession = this.professionName[0]
      // 中类职业
      this.bizCertData.childProFession = this.professionName[1]
      // 国籍
      this.bizCertData.country = this.cusCountryName
      // 正面照
      this.bizCertData.frontPhoto = this.frontUrl
      // 反面照
      this.bizCertData.backPhoto = this.reverseUrl
      // 联网核查结果
      this.bizCertData.onlineResult = '公民身份证号码与姓名一致，且存在照片'
      // 人脸识别分数
      this.bizCertData.faceScore = sessionStorage.getItem('score')
      // 活体检测结果
      this.bizCertData.liveResult = sessionStorage.getItem('onlineResult')
      // 信息维护
      this.bizCertData.informationMaintenance = this.isUpdateFlag
      // 业务类型
      this.bizCertData.businessType = sessionStorage.getItem('businessType')
      // 客户签名
      this.bizCertData.signUrl = this.cusSignUrl
      // 经办人
      this.bizCertData.manager = Constants.Agent.agentName
      // 经办人工号
      this.bizCertData.managerNum = Constants.Agent.agentId
    },
    // 发送业务凭证
    sendBizCertToClient() {
      const certObj = this.bizCertData
      globalUserData.sendBizCertAndSign(certObj)
    },
    // 步骤6-2，提交结果
    next6to2() {
      const self = this
      html2canvas(document.querySelector('#bizCertCanvas'), {
        useCORS: true,
        allowTaint: false
      }).then(function(canvas) {
        console.log('biz cert canvas is: ' + canvas.toDataURL())
        self.dialogVisible = true
        self.bizCertUrl = canvas.toDataURL()
      }).catch(error => {
        console.log(error)
      })
    },
    // 生成电子凭证
    next6to3() {
      const self = this
      html2canvas(document.querySelector('#bizCertCanvas'), {
        useCORS: true,
        allowTaint: false
      }).then(function(canvas) {
        console.log('biz cert canvas is: ' + canvas.toDataURL())
        self.bizCertUrl = canvas.toDataURL()
        self.uploadFileFun()
      }).catch(error => {
        console.log(error)
      })
    },
    // 交易结束（公用）
    nextEnd() {
      if (!this.flagEnd) {
        this.saveTransPipelineFun()
      }
      this.flag2to2 = false
      this.endTransFlag = false
      this.flagEnd = true
      this.resetGlobalVarible()
      Constants.ModelChat = {}
      globalUserData.sendEndTransaction()
    },
    // 获取职业种类name
    handleProfessFun(item) {
      this.professionName = this.$refs.professionForm.getCheckedNodes()[0].pathLabels
    },
    // 获取国籍name
    getCountryName(val) {
      this.cusCountryName = window.DICJSON.COUNTRY.find(ele => ele.value === val).label || ''
    },
    // 联网查询分数
    queryCusSenceScoreFun(cusSenceUrl) {
      cusSenceUrl = cusSenceUrl.substring(cusSenceUrl.indexOf('base64,') + 'base64,'.length, cusSenceUrl.length)
      const params = {
        'biologicalImgOne': cusSenceUrl,
        'biologicalImgOneType': '',
        'customerName': sessionStorage.getItem('customerName'),
        'customerNo': '',
        'customerType': '',
        'idCardNo': sessionStorage.getItem('idCardNo'),
        'idCardType': '',
        'netCheckImg': '',
        'netCheckImgType': '',
        'netCheckStatus': ''
      }
      queryCusSenceScore(params).then(response => {
        const data = response.data
        if (data.code == 200 && data.data) {
          this.score = data.data.IdnfScore
          sessionStorage.setItem('score', this.score)
          if (parseFloat(this.score) >= 0.9) {
            this.scoreColor = 'greenColor'
            this.onlineResult = '通过'
            this.levelRisk = '低风险'
            sessionStorage.setItem('onlineResult', this.onlineResult)
          } else {
            this.scoreColor = 'redColor'
            this.onlineResult = '由坐席确认是否通过'
            this.levelRisk = '高风险'
            sessionStorage.setItem('onlineResult', this.onlineResult)
          }
        } else {
          this.score = 0.001
          this.scoreColor = 'redColor'
          this.onlineResult = '由坐席确认是否通过'
          this.levelRisk = '高风险'
          sessionStorage.setItem('score', this.score)
          sessionStorage.setItem('onlineResult', this.onlineResult)
          window.globalUiKit.alert('联网查询分数失败', '失败原因：' + data.message)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 客户信息查询
    queryCusInfoFun: function(customerNo) {
      const params = {
        'customerName': '',
        'customerNo': customerNo,
        'idCardNo': '',
        'idCardType': ''
      }
      queryCusInfo(params).then(response => {
        const data = response.data
        console.log('response cus info data is: ' + JSON.stringify(data))
        if (data.code == 200 && data.data) {
          // 客户基本信息显示位置
          this.cusInfoData.cusModel[0].cusInfoValue = data.data.CstNm
          if (data.data.Gender == '0') {
            this.cusInfoData.cusModel[1].cusInfoValue = '未知'
          } else if (data.data.Gender == '1') {
            this.cusInfoData.cusModel[1].cusInfoValue = '男'
          } else if (data.data.Gender == '2') {
            this.cusInfoData.cusModel[1].cusInfoValue = '女'
          } else if (data.data.Gender == '9') {
            this.cusInfoData.cusModel[1].cusInfoValue = '未说明'
          }
          this.cusInfoData.cusModel[2].cusInfoValue = data.data.NationVal
          this.cusInfoData.cusModel[3].cusInfoValue = data.data.BirthDt
          this.cusInfoData.cusModel[4].cusInfoValue = data.data.IdentNo
          this.cusInfoData.cusModel[5].cusInfoValue = data.data.IdentIssuDt + '_' + data.data.InvalDt
          this.cusInfoData.cusModel[6].cusInfoValue = data.data.CtcTel
          this.cusInfoData.cusModel[7].cusInfoValue = data.data.CtcAdr
          this.cusInfoData.cusModel[8].cusInfoValue = data.data.OcpCdVal
          this.cusInfoData.cusModel[9].cusInfoValue = data.data.ScdLvlOcpCdVal
          this.cusInfoData.cusModel[10].cusInfoValue = data.data.NtntyCdVal
          // 更新客户信息显示位置
          this.cusName = data.data.CstNm || this.ocrCusInfoData.ocrName
          this.cusSex = this.cusInfoData.cusModel[1].cusInfoValue || this.ocrCusInfoData.ocrSex
          this.cusNation = data.data.NationVal || this.ocrCusInfoData.ocrNation
          this.cusBirthDate = data.data.BirthDt || this.ocrCusInfoData.ocrBirthDate
          this.cusIdentify = data.data.IdentNo || this.ocrCusInfoData.ocrIdentify
          this.cusCertTerm = data.data.IdentIssuDt + '_' + data.data.InvalDt || this.ocrCusInfoData.ocrCertTerm
          this.cusTel = data.data.CtcTel
          this.cusAddress = data.data.CtcAdr || this.ocrCusInfoData.ocrAddress
          this.professionValue = [data.data.OcpCd, data.data.ScdLvlOcpCd]
          this.cusCountry = data.data.NtntyCd
          this.professionName = [data.data.OcpCdVal, data.data.ScdLvlOcpCdVal]
          this.cusCountryName = data.data.NtntyCdVal
          if (this.cusName && this.cusSex && this.cusNation && this.cusBirthDate && this.cusIdentify && this.cusCertTerm && this.cusAddress && this.cusCountry && this.professionValue.length > 0 && this.cusTel) {
            this.tradePwdFlag = false
          } else {
            this.tradePwdFlag = true
          }
        } else {
          this.ocrCusInfoDataFun()
          window.globalUiKit.alert('客户基本信息查询失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
        }
      }).catch(error => {
        console.log(error)
        this.ocrCusInfoDataFun()
      })
    },
    // 客户信息默认获取身份证件接口字段
    ocrCusInfoDataFun() {
      this.tradePwdFlag = true
      this.cusName = this.ocrCusInfoData.ocrName
      this.cusSex = this.ocrCusInfoData.ocrSex
      this.cusNation = this.ocrCusInfoData.ocrNation
      this.cusBirthDate = this.ocrCusInfoData.ocrBirthDate
      this.cusIdentify = this.ocrCusInfoData.ocrIdentify
      this.cusCertTerm = this.ocrCusInfoData.ocrCertTerm
      this.cusAddress = this.ocrCusInfoData.ocrAddress
    },
    // 客户照片转base64位
    imgTransBase64Fun() {
      imgTransBase64(this.frontName).then(response => {
        this.frontBase64 = response.data
      }).catch(error => {
        console.log(error)
      })
      imgTransBase64(this.reverseName).then(response => {
        this.reverseBase64 = response.data
      }).catch(error => {
        console.log(error)
      })
      imgTransBase64(this.mediaCardName).then(response => {
        this.mediaCardBase64 = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    /** ******************************* 社保卡激活 ***************************************/
    // 社保卡激活开通
    socialCardActiveFun: function() {
      const param = {
        'address': this.cusInfoData.cusModel[7].cusInfoValue,
        'cardNo': sessionStorage.getItem('bankCardNo'),
        'custName': this.cusInfoData.cusModel[0].cusInfoValue,
        'flag': this.khflag,
        'idCardNo': sessionStorage.getItem('idCardNo'),
        'idCardType': '1',
        'password': sessionStorage.getItem('password'),
        'phone': this.cusInfoData.cusModel[6].cusInfoValue
      }
      socialCardActive(param).then(response => {
        const data = response.data
        console.log('response social card active data is: ' + JSON.stringify(data))
        if (data.code == 200) {
          sessionStorage.setItem('coreSeqNo', data.data.hostSerial)
          sessionStorage.setItem('tranDate', data.data.tranDate)
          sessionStorage.setItem('tranTime', data.data.tranTime)
          this.cardActiveFlag = true
          // 互联网开通标志
          const params = {
            'acctName': sessionStorage.getItem('customerName'),
            'cardNo': sessionStorage.getItem('bankCardNo'),
            'idCardNo': sessionStorage.getItem('idCardNo'),
            'idCardType': '1'
          }
          onlinePayOpen(params).then(response => {
            const data = response.data
            console.log('response online pay open data is: ' + JSON.stringify(data))
            if (data.code == 200 && data.data) {
              this.cardActiveSuccess()
              globalUserData.sendBizFormSuccess()
            } else {
              this.failReason = data.message
              this.cardActiveFail()
              globalUserData.sendBizFormFail(data.message)
              window.globalUiKit.alert('互联网开通失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
            }
          }).catch(error => {
            console.log(error)
            window.globalUiKit.alert('互联网开通失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
          })
        } else {
          this.cardActiveFlag = false
          this.failReason = data.message
          this.cardActiveFail()
          globalUserData.sendBizFormFail(data.message)
          window.globalUiKit.alert('社保卡激活失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(param))
        }
      }).catch(error => {
        this.cardActiveFlag = false
        console.log(error)
        window.globalUiKit.alert('社保卡激活失败', '失败原因：' + error + '；入参：' + JSON.stringify(param))
      })
    },
    // 借记卡激活
    submitBizFormFun: function() {
      const params = {
        'atmTransferOpnFlg': this.openBizData.item1 ? '1' : '0',
        'bankCardNo': sessionStorage.getItem('bankCardNo'),
        'icCardSerialNo': '',
        'idCardNo': sessionStorage.getItem('idCardNo'),
        'password': sessionStorage.getItem('password'),
        'reservePhoneNum': sessionStorage.getItem('contactTel'),
        'tellerNo': '',
        'thirdPayOpnFlg': this.openBizData.item3 ? '0' : '1',
        'tradingChannelFlg': '',
        'transactionBranchId': '',
        'transferPerDay': this.openBizData.item2,
        'twoTrackInfo': ''
      }
      console.log('request submit biz form data: ' + JSON.stringify(params))
      submitBizForm(params).then(response => {
        const data = response.data
        console.log('response submit biz form data: ' + JSON.stringify(data))
        if (data.code == 200 && data.data) {
          sessionStorage.setItem('coreSeqNo', data.data.CoreSeqNo)
          sessionStorage.setItem('tranDate', data.data.tranDate)
          sessionStorage.setItem('tranTime', data.data.tranTime)
          this.cardActiveFlag = true
          this.cardActiveSuccess()
          globalUserData.sendBizFormSuccess()
        } else {
          this.cardActiveFlag = false
          this.failReason = data.message
          this.cardActiveFail()
          globalUserData.sendBizFormFail(data.message)
          window.globalUiKit.alert('借记卡激活失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
        }
      }).catch(error => {
        this.cardActiveFlag = false
        console.log(error)
        window.globalUiKit.alert('借记卡激活失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
      })
    },
    // 发送短信验证码
    sendCodeMessageFun: function(cusTel, code) {
      const params = {
        'content': '[客户信息更新],' + code + '（短信验证码），请勿向他人泄露。',
        'phone': cusTel,
        'agentName': Constants.Agent.agentName,
        'agentId': Constants.Agent.agentId,
        'smsType': '卡激活'
      }
      sendCodeMessage(params).then(response => {
        const data = response.data
        if (data.code == 200) {
          console.log('send code message success')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 上传电子凭证照片
    uploadFileFun: function() {
      const bizCertBlob = Utils.dataURLtoBlob(this.bizCertUrl)
      const formData = new FormData()
      formData['enctype'] = 'multipart/form-data'
      formData.append('file', bizCertBlob)
      uploadFile(formData).then(response => {
        console.log('response biz cert link is: ' + response.data)
        this.bizCertName = response.data
        if (window.Settings.imgLinkUploadFlag) {
          this.submitTransImgUploadFun()
        } else {
          this.submitBizCertFun()
        }
      }).catch(error => {
        console.log(error)
        if (window.Settings.imgLinkUploadFlag) {
          this.submitTransImgUploadFun()
        } else {
          this.submitBizCertFun()
        }
      })
    },
    // 提交业务凭证到影像平台（暂未用到）
    submitBizCertFun: function() {
      this.dialogVisible = false
      const params = {
        'fileInfos': [{
          'fileType': '身份证正面',
          'fileTypeCode': '2601001',
          'fileUrl': this.frontName
        }, {
          'fileType': '身份证反面',
          'fileTypeCode': '2601002',
          'fileUrl': this.reverseName
        }, {
          'fileType': '卡片',
          'fileTypeCode': '2601003',
          'fileUrl': this.mediaCardName
        }, {
          'fileType': '客户现场照',
          'fileTypeCode': '2601004',
          'fileUrl': this.cusSceneName
        }, {
          'fileType': '凭证',
          'fileTypeCode': '2601005',
          'fileUrl': this.bizCertName
        }],
        'filePartName': 'ZNKFKJHP',
        'modeCode': 'ZNKFKJH',
        'modelName': '卡激活',
        'sessionId': Constants.ModelChat.sid
      }
      console.log('request submit biz cert data: ' + JSON.stringify(params))
      submitBizCert(params).then(response => {
        const data = response.data
        console.log('response submit biz form data: ' + JSON.stringify(data))
        this.bizCertSeqNo = data.data
        if (data.code == 200) {
          this.flag6to1 = false
          this.flag6to2 = true
          globalUserData.sendBizSuccess()
        } else {
          this.flag6to1 = false
          this.flag6to3 = true
          globalUserData.sendBizFail()
          this.certFailReason = data.message
          window.globalUiKit.notify('提示', '提交电子凭证失败', 'error')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 保存影像平台交易流水
    submitTransImgUploadFun() {
      this.dialogVisible = false
      this.flag6to1 = false
      this.flag6to2 = true
      globalUserData.sendBizSuccess()
    },
    // 记录交易流水
    saveTransPipelineFun: function() {
      const params = {
        'transactionDate': sessionStorage.getItem('tranDate'),
        'transactionTime': sessionStorage.getItem('tranTime'),
        'transactionNo': sessionStorage.getItem('coreSeqNo'),
        'agentName': Constants.Agent.agentName,
        'agentNo': Constants.Agent.agentId,
        'channelType': Constants.ModelChat.chatType,
        'sessionId': Constants.ModelChat.sid,
        'businessType': '卡激活',
        'openBankName': sessionStorage.getItem('openingBank'),
        'customerName': sessionStorage.getItem('customerName'),
        'idCardType': '身份证',
        'idCardNo': sessionStorage.getItem('idCardNo'),
        'cardNo': sessionStorage.getItem('bankCardNo'),
        'accountName': sessionStorage.getItem('customerName'),
        'transactionAmount': this.openBizData.item2 ? this.openBizData.item2 : 0,
        'transactionStatus': this.cardActiveFlag ? '成功' : '失败',
        'errorMsg': this.failReason,
        'isSatisfaction': '',
        'docidNo': Constants.ModelChat.sid,
        'filePartName': 'ZNKFKJHP',
        'modelCode': 'ZNKFKJH',
        'frontImge': this.frontName,
        'backImge': this.reverseName,
        'csImge': this.cusSceneName,
        'businessImge': this.bizCertName,
        'card': this.mediaCardName,
        'uploadFlag': 'img'
      }
      console.log('request save trans pipeline data: ' + JSON.stringify(params))
      saveTransPipeline(params).then(response => {
        const data = response.data
        console.log('response save trans pipeline data: ' + JSON.stringify(data))
        if (data.code == 200) {
          console.log('记录交易流水成功')
          window.globalUiKit.notify('提示', '视频交易流水记录成功！', 'success')
        } else {
          console.log('记录交易流水失败')
          window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
        }
      }).catch(error => {
        console.log(error)
        window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
      })
    },
    // 全局变量重置
    resetGlobalVarible: function() {
      this.frontUrl = 'assets/theme/img/viceoBiz/frontPhoto.png'
      this.reverseUrl = 'assets/theme/img/viceoBiz/reversePhoto.png'
      this.cusSceneUrl = 'assets/theme/img/viceoBiz/perpr.png'
      this.cusSceneName = ''
      this.mediaCardUrl = 'assets/theme/img/viceoBiz/cardMedia.png'
      this.frontUrlList = []
      this.reverseUrlList = []
      this.mediaCardUrlList = []
      this.cusSignUrl = ''
      this.frontName = ''
      this.reverseName = ''
      this.mediaCardName = ''
      this.frontBase64 = ''
      this.reverseBase64 = ''
      this.mediaCardBase64 = ''
      this.cusSignBase64 = ''
      this.bankCardNo = ''
      this.score = 0
      this.levelRisk = '高风险'
      this.scoreColor = 'redColor'
      this.onlineResult = '由坐席确认是否通过'
      this.cardStatus = '借记卡未激活'
      this.cardType = '2'
      this.cardName = '借记卡'
      this.khflag = '0'
      this.failReason = ''
      this.timer = ''
      this.tradePwdFlag = false
      this.cardActiveFlag = false
      this.isUpdateFlag = false
      this.flag2to3 = false
      this.flag2to4 = false
      this.flag2to5 = false
      this.flag3to1 = false
      this.flag3to2 = false
      this.flag3to3 = false
      this.flag4to1 = false
      this.flag4to2 = false
      this.flag4to3 = false
      this.flag5to1 = false
      this.flag5to2 = false
      this.flag5to3 = false
      this.flag6to1 = false
      this.flag6to2 = false
      this.flag6to3 = false
      this.reSignFlag = false
      this.bizFormFlag = false
      this.sendSignFlag = true
      this.submitResultFlag = false
      this.cusAddress = ''
      this.cusAddressFlag = false
      this.cusCountry = 'CHN'
      this.cusCountryName = '中国'
      this.professionValue = []
      this.professionName = []
      this.cusName = ''
      this.cusSex = ''
      this.cusNation = ''
      this.cusBirthDate = ''
      this.cusIdentify = ''
      this.cusCertTerm = ''
      this.cusTel = ''
      this.cusTelFlag = false
      this.codeFailFlag = false
      this.codeSuccessFlag = false
      this.openBizData.item1 = false
      this.openBizData.item2 = 0
      this.openBizData.item3 = false
      this.bizConfirmFlag = true
      this.transTime = ''
      this.bizFromConfirmFlag = false
      this.dialogVisible = false
      this.bizCertUrl = ''
      this.bizCertName = ''
      this.bizCertSeqNo = ''
      this.certFailReason = ''
      this.bizCertData = {
        // 流水号
        'coreSeqNo': '',
        // 姓名
        'name': '',
        // 证件类型
        'certType': '身份证',
        // 证件号码
        'idNum': '',
        // 民族
        'nation': '',
        // 联系电话
        'tel': '',
        // 大类职业
        'profession': '',
        // 中类职业
        'childProFession': '',
        // 国籍
        'country': '',
        // 联系地址
        'address': '',
        // 正面照
        'frontPhoto': this.frontUrl,
        // 反面照
        'backPhoto': this.reverseUrl,
        // 联网核查结果
        'onlineResult': this.onlineResult,
        // 人脸识别分数
        'faceScore': this.score,
        // 活体检测结果
        'liveResult': '',
        // 信息维护
        'informationMaintenance': this.isUpdateFlag,
        // 业务类型
        'businessType': sessionStorage.getItem('businessType'),
        // 客户签名
        'signUrl': '',
        // 经办人
        'manager': '',
        // 经办人工号
        'managerNum': ''
      }
      this.cusInfoData = {
        'cusInfoTitle': '客户基本信息',
        'cusModel': [
          {
            'cusInfoKey': '姓名：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '性别：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '民族：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '出生年月：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '身份证号码：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '证件有效期：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '联系方式：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '联系地址：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '大类职业：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '中类职业：',
            'cusInfoValue': ''
          },
          {
            'cusInfoKey': '国籍：',
            'cusInfoValue': ''
          }
        ]
      }
      this.ocrCusInfoData = {
        ocrName: '',
        ocrSex: '',
        ocrNation: '',
        ocrBirthDate: '',
        ocrIdentify: '',
        ocrCertTerm: '',
        ocrAddress: ''
      }
      sessionStorage.removeItem('customerName')
      sessionStorage.removeItem('nationality')
      sessionStorage.removeItem('idCardType')
      sessionStorage.removeItem('idCardNo')
      sessionStorage.removeItem('contactTel')
      sessionStorage.removeItem('contactAdr')
      sessionStorage.removeItem('password')
      sessionStorage.removeItem('coreSeqNo')
      sessionStorage.removeItem('tranDate')
      sessionStorage.removeItem('tranTime')
      sessionStorage.removeItem('bankCardNo')
      sessionStorage.removeItem('customerNo')
      sessionStorage.removeItem('businessType')
      sessionStorage.removeItem('openingBank')
      sessionStorage.removeItem('videoCallType')
    },
    // 60s计时器
    start() {
      const _this = this
      let second = 60
      _this.timer = setInterval(function() {
        if (second > 0) {
          second = second - 1
          _this.callinTime = second + 's后可发送'
          _this.cusTelFlag = true
        } else {
          _this.cusTelFlag = false
          window.clearInterval(_this.timer)
        }
      }, 1000)
    }
  }
}
</script>
<style scoped>
  .step-box {
    width: 100%;
    margin: 0 auto;
  }

  /************************************* 页面一 *********************************************/

  .greenColor {
    color: green;
  }

  .redColor {
    color: red;
  }

  .custom-id-title {
    text-align: center;
    margin: 15px 0;
  }

  .papers-photo {
    height: 186px;
    width: 274px;
  }

  .papers-photo .el-image {
    height: 100%;
    width: 100%;
  }

  .papers-photo img {
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-identity-title {
    margin: 20px 0 15px 0;
    text-align: center;
  }

  .peror-photo {
    height: 200px;
    width: 186px;
    overflow: hidden;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }

  .search-result {
    margin: 30px 0 40px 0;
  }

  .per-result {
    margin: 10px 0;
  }

  .bottom-submit {
    text-align: center;
  }

  /************************************* 页面二 *********************************************/
  .page-box {
    height: 100%;
    width: 100%;
  }

  .page-bottom {
    text-align: center;
  }

  .left-box {
    height: 750px;
  }

  .right-box {
    height: 750px;
  }

  .left-top-header {
    text-align: center;
    margin: 30px 0 20px 0;
  }

  .card-media-photo {
    width: 349px;
    height: 190px;
    overflow: hidden;
  }

  .card-media-photo .el-image {
    height: 100%;
    width: 100%;
  }

  .card-media-photo img {
    height: 100%;
    width: 100%;
  }

  .left-top-bottom {
    text-align: center;
    margin: 30px 0 20px 0;
  }

  .cus-info-box {
    padding: 10px 0px;
  }

  .cus-info-title {
    text-align: center;
    font-weight: bold;
  }

  .cus-info-row {
    line-height: 30px;
    padding: 3px 10px;
  }

  .view-box {
    margin: 30px 0;
    border: 1px solid #d6d2d2;
    height: 675px;
  }

  .view-header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #eceeef;
  }

  .view-middle {
    height: 580px;
  }

  .view-middle-header {
    height: 250px;
  }

  .view-middle-bottom {
    height: 330px;
  }

  .sign-style {
    border: 1px dashed;
    height: 150px;
    margin-top: 15px;
    width: 100%;
  }

  .sign-style img {
    height: 100%;
    width: 100%;
  }

  .code-icon-fail {
    padding: 15px 0 0 25px;
    color: #ef1010;
  }

  .code-icon-success {
    padding: 15px 0 0 25px;
    color: #24ab05;
  }

  .code-padding {
    padding-left: 15px;
  }

  .open-biz-item {
    padding: 25px 0 0 60px;
  }

  .view-bottom {
    text-align: center;
    height: 55px;
    line-height: 55px;
  }

  .verify-item {
    padding: 15px 30px 0 30px;
  }

  .verify-item-ocr {
    padding: 30px 10px 0px 10px;
  }

  .verify-item-list {
    padding: 12px 0 0 0;
  }

  .photo-box {
    padding-top: 160px;
  }

  .photo-title {
    padding-top: 20px;
    text-align: center;
  }

  .pass-photo {
    width: 47px;
    height: 68px;
    margin: 0 auto;
  }

  .exceed-photo {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }

  .open-biz-photo {
    width: 52px;
    height: 58px;
    margin: 0 auto;
  }

  .signature-photo {
    width: 50px;
    height: 48px;
    margin: 0 auto;
  }

  .signature-photo-real {
    width: 150px;
    height: 100px;
    line-height: 100px;
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
  }

  .biz-cert-photo {
    width: 150px;
    height: 400px;
    line-height: 400px;
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
  }

  .success-photo {
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }

  .word-border-style {
    font-weight: bold;
  }

  .confirmTable {
    padding: 10px 20px;
    width: 100%;
  }

  .confirmTitle {
    text-align: center;
    height: 34px;
    line-height: 34px;
    font-weight: bold;
  }

  .confirmTableBody {
    width: 100%;
    border: 2px solid #0c0c0c;
  }

  .padding-style {
    padding: 10px;
  }

  .border-bottom-style {
    border-bottom: 1px solid #909399
  }

  .border-right-style {
    border-right: 1px solid #909399
  }

  .border-left-style {
    border-left: 1px solid #909399
  }

  .border-bottom-bold-style {
    border-bottom: 2px solid #0c0c0c;
  }

  .confirmTableBFooter {
    padding: 5px;
  }

  .footer-style {
    padding: 4px;
  }

  .rules {
    color: red;
    font-size: 13px;
  }

  .line-height {
    line-height: 28px;
  }

</style>
